<template>
    <div class="mainContent">

        <a-spin :spinning="spinning">
            <div style="width:90%;margin:0 auto;margin-top: 30px;">
                <a-row>
                    <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">交易信息</a-col>
                </a-row>
                <a-form style="margin-bottom: 20px;" layout="inline">
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="批次号">
                        <span class="ant-form-text">
                            {{payDetail.externalFields.batchNo}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="商户号">
                        <span class="ant-form-text">
                            {{payDetail.mainMemberNo}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="商户名称">
                        <span class="ant-form-text">
                            {{payDetail.mainMemberName}}
                        </span>
                    </a-form-item>

                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="交易类型">
                        <span class="ant-form-text">
                            {{payDetail.transName}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="代付类型">
                        <span class="ant-form-text">
                            {{payDetail.externalFields.batchNo}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth'>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="账户名称">
                        <span class="ant-form-text">
                            {{payDetail.mainMemberName}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="开户行名称">
                        <span class="ant-form-text">
                            {{payDetail.externalFields.bankName}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="账号">
                        <span class="ant-form-text">

                            {{payDetail.externalAccountNo}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="商户单号">
                        <span class="ant-form-text">
                            {{payDetail.merchantOrderNo}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="交易单号">
                        <span class="ant-form-text">
                            {{payDetail.transOrderNo}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="上游单号">
                        <span class="ant-form-text">
                            {{payDetail.externalOrderNo}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="交易日期">
                        <span class="ant-form-text">
                            {{payDetail.transDate}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="交易时间">
                        <span class="ant-form-text">
                            {{payDetail.transTime | timeFilter}}
                        </span>
                    </a-form-item>

                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="交易金额">
                        <span class="ant-form-text">
                            {{payDetail.amount | cashfilter}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="交易状态">
                        <span class="ant-form-text">
                            {{payDetail.statusName}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="摘要">
                        <span class="ant-form-text">
                            {{payDetail.externalFields.batchNo}}
                        </span>
                    </a-form-item>
                    <a-row>
                        <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">手续费信息</a-col>
                    </a-row>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="代付手续费">
                        <span class="ant-form-text">
                            {{payDetail.feeAmount | cashfilter}}
                        </span>
                    </a-form-item>
                </a-form>
                <a-button @click='backTransList'>
                    <a-icon type="double-left" />返回</a-button>
            </div>
        </a-spin>
    </div>
</template>

<script>

    import { message } from "ant-design-vue";
    import api from "@/common/api";
    import { error } from "util";
    import { fail } from "assert";
    import AHideData from "../../common/HideData";
    const columns = [
        { title: "结算时间", dataIndex: "ctime" },
        { title: "交易单号", dataIndex: "time" },
        { title: "业务类型", dataIndex: "No" },
        // { title: "商户名称", dataIndex: "No1" },
        { title: "收入金额（元）", dataIndex: "account" },
        { title: "支出金额（元）", dataIndex: "type" },
        { title: "账户余额（元）", dataIndex: "STATUS" }
    ];

    const data = [
        {
            key: 1,
            ctime: "2019-01-20",
            time: "2018-01-02",
            No: "124235436478",
            STATUS: "交易完成",
            type: "扫码支付",
            account: "42355元",
            description:
                "My name is Joey Black,, I am 32 years old, living in Sidney No. 1 Lake Park."
        }
    ];

    export default {
        name: "orgMyInfo",
        components: {
        },
        data() {
            return {
                iconLoading: false,
                spinning: false,
                name: '张三',
                phone: '18239464417',
                payDetail: {
                    externalFields: {
                        batchNo:''
                    }
                },
                formItemLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 8 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 15, offset: 1 },
                        md: { span: 15, offset: 1 }
                    }
                }
            };
        },
        watch: {},
        computed: {},
        filters: {
            nameFilter(value) {
                if (value) {
                    return '*' + value.substring(1, value.length)
                }
                return ''
            },
            phoneFilter(value) {
                if (value) {
                    return value.substring(0, 3) + '****' + value.substring(7, value.length)
                }
                return ''
            },
            timeFilter: function (value) {
                if (value) {
                    let year = value.substring(0, 2)
                    let mouth = value.substring(2, 4)
                    let day = value.substring(4, 6)
                    return year + ':' + mouth + ':' + day;
                }
            },
            AccountNofilter(value) {
                if (value) {
                    var reg = /.*(.{4})$/;
                    return value.replace(reg, "**** **** **** ***$1");
                }
            },
            cashfilter(value) {
                return parseFloat(value / 100).toFixed(2) + '元';
            }

        },
        mounted() {
            let id = this.$route.params.id;
            this.getQueryDetail(id)
        },
        methods: {

            goModify() {
                this.query.verCode = null;
                this.visible = true;
            },
            orgSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        api.coustromsendPhoneOrg(this.query, res => {
                            if (res.code == "OK") {
                                this.visible = false;
                                this.$router.push("/org/infoset/allinfoChange");
                            } else {
                                this.$message.warning(res.message);
                            }
                        });
                    }
                });
            },

            handleOk() {
                this.$router.push("/home");
            },
            gologin() {
                this.visible = false;
                this.$router.push("/home");
            },
            getQueryDetail(id) {
                this.$axios.get('/agent/transaction/withdraw/api/' + id).then(res => {
                    console.log(res)
                    if (res.data.code == "OK") {
                        this.payDetail = res.data.data;
                        this.payDetail.externalFields = JSON.parse(this.payDetail.externalFields)
                    }
                }, err => {

                })
            },
            backTransList() {
                this.$router.push('/org/transmanage/payquery')
            }
        }
    };
</script>

<style lang="less" scoped>
    .card_sty {
        margin-bottom: 30px;
    }

    .mainContent {
        overflow-y: scroll;
        height: 100%;
        padding: 30px;
    }

    /* 滚动条样式 */
    .mainContent::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        scrollbar-arrow-color: red;

    }

    .mainContent::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
        scrollbar-arrow-color: red;
    }

    .mainContent::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }

    span {
        cursor: pointer;
    }

    .formItemWidth {
        width: 30%;
    }

    .formGroupTitle {
        font-size: 16px;
        font-weight: bold;
        margin-top: 15px;
        margin-bottom: 20px;
        text-align: left;
        margin-left: 20px;
    }


    .ant-card-head-title {
        padding: 12px 0 !important;
    }

    .ant-card-grid {
        padding: 12px;
    }

    .ant-card-head {
        background: transparent;
        border-bottom: 1px solid #e8e8e8;
        padding: 0 24px;
        border-radius: 2px 2px 0 0;
        zoom: 1;
        margin-bottom: -1px;
        min-height: 45px !important;
        font-size: 16px;
        color: #52506b;
        font-weight: 400;
        display: flex;
    }

    .ant-card .ant-card-grid:nth-child(4n+1),
    .ant-card .ant-card-grid:nth-child(4n+2) {
        background: #f7f9fc;
    }

    .ant-card-grid:hover {
        /* box-shadow: none; */
        box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, 1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
    }
</style>